'use client';

import React from 'react';

import Image from 'next/image';

import { cn } from '@/utils/utils';

import { ImageAssets, WEBSITE } from '@/constants';

import { useTheme } from '../theme/theme-provider';

type Props = {
    className?: string;
};

export const Logo = ({ className }: Props) => {
    const { theme } = useTheme();

    return (
        <div className={cn('relative w-11 h-11', className)}>
            {/* src={theme === 'light' ? ImageAssets.logoDark : ImageAssets.logoLight} */}
            <Image
                src={'/avatar.png'}
                width={32}
                height={32}
                className={cn(
                    'h-11 w-11 rounded-full overflow-hidden transition-all duration-200',
                    theme === 'light'
                        ? 'border-2 border-gray-100 shadow-sm hover:shadow-md'
                        : '',
                )}
                alt={WEBSITE}
                priority
            />
        </div>
    );
};
